<template>
  <div>
    <!--导航-->
    <div class="head-all" ><cmHeader id="4"></cmHeader></div>
    <!--banner-->
    <div class="banner f-tb"><div>管理入口</div> <div>Management Entrance</div></div>
    <div class="withFix">
      <div class="cardWrapper f-zhong">
        <div class="card f-tb" v-for="(item,index) in dataList" :key="index" @click="do_goManage(index)">
          <img :src="item.src" alt="">
          <div v-text="item.name"></div>
          <span v-text="item.english"></span>
          <img src="../../assets/commonImg/xuanzhong201974.png" alt="">
        </div>


        <!--<div class="card f-tb">-->
          <!--<img src="../../assets/commonImg/shengji_xuanzhong201974.png" alt="">-->
          <!--<div>省级管理入口</div>-->
          <!--<span>Province management Entrance</span>-->
          <!--<img src="../../assets/commonImg/xuanzhong201974.png" alt="">-->
        <!--</div>-->
        <!--<div class="card f-tb">-->
          <!--<img src="../../assets/commonImg/shengji_xuanzhong201974.png" alt="">-->
          <!--<div>省级管理入口</div>-->
          <!--<span>Province management Entrance</span>-->
          <!--<img src="../../assets/commonImg/xuanzhong201974.png" alt="">-->
        <!--</div>-->
        <!--<div class="card f-tb">-->
          <!--<img src="../../assets/commonImg/shengji_xuanzhong201974.png" alt="">-->
          <!--<div>省级管理入口</div>-->
          <!--<span>Province management Entrance</span>-->
          <!--<img src="../../assets/commonImg/xuanzhong201974.png" alt="">-->
        <!--</div>-->
      </div>

    </div>

    <!--页脚-->
    <div class="foot ">
      <zcFooter></zcFooter>
    </div>
    <!--弹出层-->
    <transition name="fade">
      <confirm
        :title=mistakeTitle
        confirm="确定"
        :msg=mistakeMsg
        @confirm1="def_mistake($event)"
        v-if="mistake"
      ></confirm>
    </transition>
    <transition name="fade">
      <makeSure
        :titleConfirm="titleConfirm"
        :msgConfirm='makeSureMsg'
        v-if="confirm"
        @sure="def_makeSure($event)"
        @giveUp="def_giveUp($event)"
      ></makeSure>
    </transition>
  </div>

</template>

<script>
  import cmHeader from '../common/cm_header'
  import zcFooter from '../common/zcFooter'
  import makeSure from '../common/cm_makeSure'
  import confirm from '../common/cm_confirm'

    export default {
        name: "yw_cgkManege",
      inject:['reload'],
      components:{
        cmHeader,
        zcFooter,
        makeSure,
        confirm

      },
      data(){
          return{
            mistakeTitle:"错误",//弹出确认框
            mistake:false,
            mistakeMsg:'风口呢可能风能风口呢可能风呢可能',
            makeSureMsg:'风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能风口呢可能',//弹出选择模态框
            confirm:false,
            zcDomain:this.$ZcPublic.Domain,
            dataList:[
              {src:this.$ZcPublic.Domain+'static/img/manage/shengji_xuanzhong201975.png',name:"省级管理入口",english:'Province Management Entrance',href:""},
              {src:this.$ZcPublic.Domain+'static/img/manage/shizhou_xuanzhong201975.png',name:"市州管理入口",english:'City Management Entrance',href:""},
              {src:this.$ZcPublic.Domain+'static/img/manage/quxian_xuanzhong201975.png',name:"区县管理入口",english:'District Management Entrance',href:""},
              {src:this.$ZcPublic.Domain+'static/img/manage/xuexiao_xuanzhong201975.png',name:"学校单位入口",english:'School Unit Entrance',href:""}
            ]
          }
      },
      methods:{
        /*错误框函数*/
        def_mistake(){
          // alert(99)
          this.mistake=false
        },
        /*提醒选择框确认*/
        def_makeSure(){
          this.confirm=false
        },
        /*
        * 提醒选择框取消*/
        def_giveUp(){
          this.confirm=false
        },
        do_goManage(index){
          let url="http://" + window.location.host + "/"
          switch (index){
            case 0:
              window.open(url+'Login.html')
              break;
            case 1:
              window.open(url+'County_Login.html')
              break;
            case 2:
              window.open(url+"ResultDistrict_Login.html")
              break;
            case 3:
              window.open(url+'ResultSchool_Login.html')
              break;
          }
        }
      }

    }
</script>

<style scoped>
  @import "../../common/css/banner.css";
  .banner{
    background: url("../../assets/commonImg/bannerManagement201974.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .cardWrapper{
    height: 500px;
  }
  .card{
    color: #418DFE;
    height: 250px;
    width: 210px;
    margin-right: 12px;
    cursor: pointer;
    -webkit-filter:grayscale(100%);
  }
  .card:hover{
    -webkit-transform: scale(1.1);
    z-index: 10;
    box-shadow: 1px 1px 10px 5px gainsboro;
    -webkit-filter:grayscale(0);
  }
  .card>div{
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    padding-top: 10px;
  }
  .card span{
    font-size: 14px;
    padding-top: 5px;
  }
  .card img:first-child{
    width: 80px;
    height: 70px;

  }
  .card img:last-child{
    width: 23px;
    height: 23px;
    margin-top: 10px;
  }
</style>
